// 基于 vue.config.js 配置文件，可以修改 webpack 的默认配置

// 获取当前的编译模式
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-shop/' : '/',
  // 关闭 ESLint 语法校验
  lintOnSave: false,
  devServer: {
    open: true,
    port: 8080
  },
  // 通过 chainWebpack 来修改 webpack 的默认打包配置
  chainWebpack: config => {
    // 发布模式的配置项
    config.when(NODE_ENV === 'production', config => {
      // 配置打包的入口
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

      // 配置 externals 节点，告诉 webpack 哪些包不需要被打包到最终的文件里面
      config.set('externals', {
        axios: 'axios',
        echarts: 'echarts',
        lodash: '_',
        vue: 'Vue',
        'vue-quill-editor': 'VueQuillEditor',
        'vue-router': 'VueRouter'
      })

      // 配置 html-webpack-plugin 插件实例的参数，新增一个自定义参数 isProd
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式的配置项
    config.when(NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')

      // 配置 html-webpack-plugin 插件实例的参数，新增一个自定义参数 isProd
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}
